<template style="position: relative">
  <div class="title1 title">成绩选择</div>
  <nut-menu title-class="menu-sty" title-icon="screen-little">
    <nut-menu-item v-model="state" :options="options"/>
  </nut-menu>
  <div class="title2 title">
    <div class="item-left">测试结果</div>
<!--    <div class="item-right">-->
<!--      <span class="key">总评：{{ scoreList.score }}分</span>-->
<!--      <span class="value" v-if="scoreList.gradeS != '' && scoreList.gradeS != null">-->
<!--        ({{ scoreList.gradeS }})-->
<!--      </span>-->
<!--      <span class="value" v-else>暂无</span>-->
<!--    </div>-->
  </div>
  <div class="res-box" :v-if="allTest.length != 0">
    <div class="res-item" v-for="item in allTest" :style="{ backgroundImage: `url('${item.backSrc}')` }">
      <div class="item-key1 item">{{ item.key1 }}</div>
      <div class="item-key2 item">{{ item.key2 }}({{ item.key3 }})</div>
    </div>
  </div>
  <div v-if="scoreList.length == 0" class="empty-image-box">
    <img class="empty-image" src="../../image/empty-test-scpre2.png">
    <p class="empty-text">
    <div style="margin-top: -10px">等待成绩发布...</div>
    </p>
  </div>
  <div v-if="scoreList.length != 0">
    <van-cell-group style="border-radius: 10px;overflow: hidden;margin: 0 5px 15px 5px; background-color: #fff"
                    v-if="scoreList.gradeS != '' && scoreList.gradeS != null">
<!--      <van-cell title="体重" v-if="scoreList.weightHighS != '' && scoreList.weightHighS != null">-->
<!--        <template #title>-->
<!--          <span class="custom-title">项目&nbsp;-->
<!--            <span class="item-value">(成绩)</span>-->
<!--          </span>-->
<!--        </template>-->
<!--        <template #value>-->
<!--          <van-tag type="success" class="sample">优秀/良好</van-tag>-->
<!--          <van-tag type="primary" class="sample">及格</van-tag>-->
<!--          <van-tag type="danger" class="sample">不及格</van-tag>-->
<!--        </template>-->
<!--      </van-cell>-->
      <van-cell title="总成绩" >
        <template #title>
          <span class="custom-title">总成绩&nbsp;
            <span class="item-value">{{ scoreList.score }}分</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.score >= 80 ? 'success' : scoreList.score >= 60 ? 'primary' : 'danger' ">{{ scoreList.gradeS }}</van-tag>
        </template>
      </van-cell>
    </van-cell-group>


    <van-cell-group style="border-radius: 10px;overflow: hidden;margin: 0 5px 15px 5px;">
      <van-cell title="身高" >
        <template #title>
          <span class="custom-title">身高&nbsp;
            <span class="item-value">{{ scoreList.high == 0 ? '' : scoreList.high + 'cm' }}</span>
          </span>
        </template>
      </van-cell>
      <van-cell title="体重" >
        <template #title>
          <span class="custom-title">体重&nbsp;
            <span class="item-value">{{ scoreList.weight == 0 ? '' : scoreList.weight + 'kg'  }}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.weightHighS >= 80 ? 'success' : scoreList.weightHighS >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.weightHighS || '0'}}分</van-tag>
        </template>
      </van-cell>
<!--    </van-cell-group>-->


<!--    <van-cell-group style="border-radius: 10px;overflow: hidden;margin: 0 5px 15px 5px;">-->
      <van-cell title="肺活量" :value="scoreList.lung">
<!--                v-if="scoreList.lungS != '' && scoreList.lungS != null">-->
        <template #title>
          <span class="custom-title">肺活量&nbsp;
            <span class="item-value">{{ scoreList.lung == 0 ? '' : scoreList.lung + 'ml' }}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.lungS >= 80 ? 'success' : scoreList.lungS >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.lungS || '0'}}分
          </van-tag>
        </template>
      </van-cell>
      <van-cell title="50米跑" :value="scoreList.r50" >
<!--                v-if="scoreList.r50S != '' && scoreList.r50S != null">-->
        <template #title>
          <span class="custom-title">50米跑&nbsp;
            <span class="item-value">{{ scoreList.r50 == 0 ? '' : scoreList.r50 + 's'}}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.r50S >= 80 ? 'success' : scoreList.r50S >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.r50S || '0' }}分</van-tag>
        </template>
      </van-cell>
      <van-cell title="立定跳远" :value="scoreList.jump" >
<!--                v-if="scoreList.jumpS != '' && scoreList.jumpS != null">-->
        <template #title>
          <span class="custom-title">立定跳远&nbsp;
            <span class="item-value">{{ scoreList.jump == 0 ? '' : scoreList.jump + 'cm'}}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.jumpS >= 80 ? 'success' : scoreList.jumpS >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.jumpS || '0'}}分
          </van-tag>
        </template>
      </van-cell>
      <van-cell title="坐体前屈" :value="scoreList.antexion" >
<!--                v-if="scoreList.antexionS != '' && scoreList.antexionS != null">-->
        <template #title>
          <span class="custom-title">坐体前屈&nbsp;
            <span class="item-value">{{ scoreList.antexion == 0 ? '' : scoreList.antexion + 'cm'}}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.antexionS >= 80 ? 'success' : scoreList.antexionS >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.antexionS || '0'}}分
          </van-tag>
        </template>
      </van-cell>
      <van-cell title="仰卧起坐" :value="scoreList.sitUp" v-if="scoreList.sex == 2">
<!--                v-if="scoreList.sitPullUpS != '' && scoreList.sitPullUpS != null">-->
        <template #title>
          <span class="custom-title">仰卧起坐&nbsp;
            <span class="item-value">{{ scoreList.sitUp == 0 ? '' : scoreList.sitUp + '/min'}}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.sitPullUpS >= 80 ? 'success' : scoreList.sitPullUpS >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.sitPullUpS || '0'}}分</van-tag>
        </template>
      </van-cell>
      <van-cell title="800米跑" :value="scoreList.r800m + '/' + scoreList.r800s " v-if="scoreList.sex == 2">
<!--                v-if="scoreList.r81S != '' && scoreList.r81S != null">-->
        <template #title>
          <span class="custom-title">800米跑&nbsp;
            <span class="item-value">{{ scoreList.r800m != 0 ? scoreList.r800m + (scoreList.r800s !=  0 ? ':'+scoreList.r800s : '') : '' }}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.r81S >= 80 ? 'success' : scoreList.r81S >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.r81S || '0'}}分-+
          </van-tag>
        </template>
      </van-cell>
      <van-cell title="引体向上" :value="scoreList.pullUp" v-if="scoreList.sex == 1">
<!--                v-if="scoreList.sitPullUpS != '' && scoreList.sitPullUpS != null">-->
        <template #title>
          <span class="custom-title">引体向上&nbsp;
            <span class="item-value">{{ scoreList.pullUp == 0 ? '' : scoreList.pullUp + ''}}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.sitPullUpS >= 80 ? 'success' : scoreList.sitPullUpS >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.sitPullUpS || '0'}}分
          </van-tag>
        </template>
      </van-cell>
      <van-cell title="1000米跑" :value="scoreList.r1000m + '/' +scoreList.r1000s" v-if="scoreList.sex == 1">
        <template #title>
          <span class="custom-title">1000米跑&nbsp;
            <span class="item-value">{{ scoreList.r1000m != 0 ? scoreList.r1000m + (scoreList.r1000s !=  0 ? ':'+scoreList.r1000s : '') : ''  }}</span>
          </span>
        </template>
        <template #value>
          <van-tag :type="scoreList.r81S >= 80 ? 'success' : scoreList.r81S >= 60 ? 'primary' : 'danger' ">
            {{ scoreList.r81S || '0'}}分
          </van-tag>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group style="border-radius: 10px;overflow: hidden;margin: 0 5px 15px 5px;">
      <van-cell title="左眼裸眼视力" :value="scoreList.sightL || '待测'"/>
      <van-cell title="右眼裸眼视力" :value="scoreList.sightR || '待测'"/>
      <van-cell title="左眼串镜" :value="scoreList.eyeL || '待测'"/>
      <van-cell title="右眼串镜" :value="scoreList.eyeR || '待测'"/>
      <van-cell title="左眼屈光不正" :value="scoreList.bowL || '待测'"/>
      <van-cell title="右眼屈光不正" :value="scoreList.bowR || '待测'"/>
    </van-cell-group>

    <van-cell-group style="border-radius: 10px;overflow: hidden;margin: 0 5px 15px 5px;">
      <van-cell title="柔韧项目加分" :value="scoreList.softAdd" v-if="scoreList.softAdd > 0"/>
      <van-cell title="耐力跑加分" :value="scoreList.runAdd" v-if="scoreList.runAdd > 0" />
    </van-cell-group>

  </div>
</template>

<script>
import {getScore} from "../../api/getTest";
import {Notify} from "vant";
import {getNoticeInfo} from "../../api/notice";

export default {
  name: '',
  data() {
    return {
      state: 0,
      options: [
        // { text: '2019年秋', value: 0 },
        // { text: '2020年秋', value: 1 },
        // { text: '2021年秋', value: 2 },
        {text: '2022年', value: 0},
      ],
      allTest: [
        {
          key1: '裸眼视力',
          key2: '5.0',
          key3: '合格',
          backSrc: 'src/image/projectMin/eyesight.png',
        },
        {
          key1: '引起向上',
          key2: '11个 ',
          key3: '合格',
          backSrc: 'src/image/projectMin/upward.png',
        },
        {
          key1: '体重',
          key2: '110kg',
          key3: '合格',
          backSrc: 'src/image/projectMin/weight.png',
        },
        {
          key1: '肺阔',
          key2: '1420ml',
          key3: '合格',
          backSrc: 'src/image/projectMin/lung_test.png',
        },
        {
          key1: '坐位体前曲',
          key2: '11cm',
          key3: '合格',
          backSrc: 'src/image/projectMin/forward.png',
        },
      ],
      scoreList: {
        "antexion": 0,
        "antexionS": "69",
        "bh": 3316,
        "bowL": 0,
        "bowR": 0,
        "college": "03",
        "eyeL": 0,
        "eyeR": 0,
        "grade": 2,
        "gradeS": "59",
        "high": 182.5,
        "jump": 0,
        "jumpS": "71",
        "lung": 0,
        "lungS": "81",
        "needUpdate": false,
        "newRecord": false,
        "pullUp": 0,
        "r1000m": 0,
        "r1000s": 0,
        "r50": 0,
        "r50S": "91",
        "r800m": 0,
        "r800s": 0,
        "r81S": "61",
        "runAdd": 0,
        "score": 0,
        "sex": "1",//男
        "sightL": 0,
        "sightR": 0,
        "sitPullUpS": "51",
        "sitUp": 0,
        "softAdd": 0,
        "stdScore": 0,
        "stuID": 201912480,
        "theYear": 2020,
        "valid": false,
        "weight": 59.8,
        "weightHighS": '80'
      }
    };
  },
  methods: {
    onConfirmItem() {
      console.log('@');
    },
    //加载分数
    async reLoadScore() {
      // let res = await getScore();
      let data = null;
      if (localStorage.getItem('scoreDate')) {
        const nowTime = (new Date()).getTime();
        const oldTime = localStorage.getItem('scoreDate')
        console.log('nowTime - oldTime', nowTime - oldTime)
        if (nowTime - oldTime < 1000 * 10) {
          data = JSON.parse(localStorage.getItem('scoreData'))
          this.scoreList = data
          return
        }
      }
      localStorage.setItem('scoreDate', (new Date()).getTime())
      const res = await getScore("201912480");
      data = res.response._rawValue
      console.log('resnotice:', data)
      if (200 != data.code) {
        // this.datalist = []
        // Toast.fail("加载通知失败")
        Notify({type: 'danger', background: '#ee0a24', message: '加载分数失败'});
        return
      }
      console.log("加载分数成功")
      if (undefined == data.extend.record) {
        console.log("但是数据为空")
        localStorage.setItem('scoreData', JSON.stringify([]))
      } else {
        this.scoreList = data.extend.record
        localStorage.setItem('scoreData', JSON.stringify(data.extend.record))
        console.log(data.extend.record)
      }
    }
  },
  async created() {
    //锁定年份
    this.options[0].text = (new Date()).getFullYear() + '年'

    this.allTest = []
    this.scoreList = {}
    // let res = await getScore();
    this.throttle = ((func, wait) => {
      var timeout = null;
      var previous = 0;
      return function () {
        let context = this;
        let args = arguments;
        if (!timeout) {
          func.apply(context, args)
          timeout = setTimeout(function () {
            timeout = null;
          }, wait)
        } else {
          Notify({type: 'danger', background: '#ee0a24', message: '请勿频繁请求'});
          // Toast.fail("请勿频繁请求")
        }
      }
    })(this.reLoadScore, 10000);

    this.throttle();
    console.log(res)
  }
};
</script>

<style scoped>
.empty-image-box {
  width: 100%;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-image {
  width: 75%;
}

.empty-text {
  margin-top: -10px;
  /*font-weight: normal;*/
  font-weight: inherit;
  font-size: inherit;
  font-family: "微软雅黑 Light";
  /*margin-top: 20px;*/
}

.title {
  font-size: larger;
}

.title1 {
  margin: auto auto 20px 10px;
  font-weight: bold;
}

.title2 {
  margin: 40px 10px 10px 10px;
  font-weight: bold;
}

::v-deep .nut-menu__bar {
  position: relative;
  height: 85px;
  margin: 10px !important;
  border-radius: 25px;
  box-shadow: 1vw -1vw -1vw rgb(89 89 89 / 12%);
}

::v-deep .nut-menu__item {
  padding-right: 20px;
  /*margin-top: 13px;*/
}

::v-deep .nut-menu__title:before {
  margin-left: 15px;
  margin-left: 15px;
  width: 250px;
  float: right;
  white-space: nowrap;
  content: '当前查看期间:';
  display: block;
  /*font-size: x-larger;*/
  font-size: 3vw;
  font-weight: bolder;
  color: #bbbbbb;
}

::v-deep .nut-menu__title-text {
  text-align: left;
  font-weight: bolder;
  color: #bbbbbb;
  width: 70% !important;
}

::v-deep .nut-icon-screen-little {
  color: #007aea;
  /*background-color: red;*/
}

::v-deep .nut-menu__pop {
  padding-top: 5px;
  top: 20vh !important;
  width: 80%;
  margin: 10% !important;
  border-radius: 15px;
}

::v-deep .nut-menu__overlay {
  top: 0 !important;
  padding: 20px;
}

/*测试项目*/
.title2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.item-right {
  /*padding-right: 10px;*/
  font-weight: normal;
  font-size: small;
}

.res-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.res-item {
  font-family: '微软雅黑';
  /*background-color: #007AEA;*/
  height: 180px;
  width: 47.5%;
  margin-bottom: 25px;
  border-radius: 20px;
  background-size: 100% 100%;
  /*padding: 20px;*/
  position: relative;
  color: white;
}

.item-key1 {
  margin: 20px auto auto 25px;
}

.item-key2 {
  position: absolute;
  bottom: 0;
  margin: auto auto 20px 25px;
}

:deep .nut-menu__title-text {
  font-size: 3vw;
}

:deep .activeTitleClass {
  font-size: 3vw;
}

:deep .inactiveTitleClass {
  font-size: 3vw;
}

:deep .nut-menu-item__option {
  font-size: 3vw;
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}

.item-value {
  color: #b0b0b0;
  /*text-decoration:underline;*/
}
.sample{
  margin-left: 5px;
}
.van-cell{
  --van-background-color-light: #fff;
  --van-cell-group-background-color: #fff;
}
</style>


